$(function () {
    //遇到 需要把 header.html 加载完成后,才执行某一些函数 ?
    // 
    $(".header").load("./header.html", function () {
        // alert("header.html,页面加载完成了,就,我才执行");
        // 等到 header页面 加载,才能让某一些 js生效
        // 固定顶部
        $(function () {
            $(document).scroll(function () {
                var $scrollTop = $(this).scrollTop();
                // console.log($scrollTop);
                if ($scrollTop > 1015) {
                    $(".xftopnav").css({ "position": "fixed", "top": 0, 'display': 'block', "zIndex": 999 });
                    // $("#content").css({marginTop:$("#fixedSch").height()});
                } else {
                    $(".xftopnav").css({ 'position': 'fixed', 'display': 'none' });
                    // $("#content").css({marginTop:0});
                }
            })

        })

        $(function () {
            if (window.location.search.indexOf("?") != -1) {
                var gid = window.location.search.split("?")[1].split("=")[1];
                $.ajax({
                    url: "./api/getinfo",
                    headers: {
                        token: localStorage.getItem("token")
                    },
                    data: {
                        gid
                    },
                    dataType: "jsonp", //重点1
                    jsonp: "cb1", //后台接受的变量名称
                    jsonpCallback: "fn" //后台返回回调函数的名称
                }).then(function (res) {
                    console.log(res);
                    var htmlStr = `
            <div class="show_left">
                    <div class="show_left_one">
                        <ul class="show_onebox">
                            <li><img src="${res.smallImg[0]}" alt=""></li>
                            <li><img src="${res.smallImg[1]}" alt=""></li>
                            <li><img src="${res.smallImg[2]}" alt=""></li>
                            <li><img src="${res.smallImg[3]}" alt=""></li>
                            <li><img src="${res.smallImg[4]}" alt=""></li>
                        </ul>
                    </div>
                    <div class="show_oneimg">
                        <img class="middImg" src="${res.bigImg[0]}" alt="">
                        <div class="middleArea"></div>
                    </div>
                    <div id="bigArea" class="bigArea">
                        <img id="bigImg" src="${res.bigImg[0]}" />
                    </div>
                    <div class="show_left_two">
                        <div class="left_two_left">
                            <span>登录分享赢好礼</span>
                            <a href="#"></a>
                            <a href="#"></a>
                            <a href="#"></a>
                        </div>
                        <a href="#" class="scyes"><img src="./images/show_left_btn.jpg" alt="">收藏商品</a>
                    </div>
                </div>
                <!-- 中间 -->
                <div class="show_center">
                    <h3>${res.name}</h3>
                    <p class="show_center_p1">低度飞天 品质依旧</p>
                    <div class="proceBox">
                        <div class="newPriceBox">
                            <p>活动价<span class="newPriceBox_span1">￥</span><span class="newPriceBox_span2">${res.price}</span></p>
                            <p class="newPriceBox_p"><span>促销信息</span><span class="newPriceBox_span3">限时抢购</span></p>
                        </div>
                    </div>
                    <div class="upmsg">
                        <div class="transTo">
                            <div class="psz">配送至：</div>
                            <a href="#">
                                <label for="">上海</label>
                            </a>
                            <span class="upmsg_span1">单笔订单不满100元，收运费10元</span>
                            <img src="./images/upmsg01.jpg" alt="">
                            <span>满百包邮</span>
                        </div>
                        <div class="pay">
                            <p>关注度<em>13874</em></p>
                            <p>累计评价<a href="#">1</a href="#"></p>
                            <p class="border_none">送积分<span>739</span></p>
                        </div>
                        <div class="numbox">
                            <div class="count">数量:</div>
                            <div class="numbtn">
                                <input type="text" id="txt" class="num" value="1">
                                <div class="btn">
                                    <button class="add">+</button>
                                    <button class="jian">-</button>
                                </div>
                            </div>
                        </div>
                        <div class="btnbox">
                            <a href="#" class="addCat">立即购买</a>
                            <a href="#" class="addToCat" data-info=${JSON.stringify(res)}><em></em>加入购物车</a>
                            <div class="apphover"><i></i>手机下单更优惠</div>
                        </div>
                    </div>
                </div>`;
                    $(".mainBox-show").html(htmlStr);

                    FangDaJ();
                    addJian();

                    $("#xfjg").text($(".newPriceBox_span2").text());
                    // $(".newPriceBox_span2").text();
                })
            }


            function addJian() {
                $(".numbox .add").on("click", function () {
                    let count = $(this).parent().prev().val();
                    count++;
                    $(this).parent().prev().val(count);
                })
                $(".numbox .jian").on("click", function () {
                    let count = $(this).parent().prev().val();
                    count--;
                    if (count < 1) {
                        return;
                    }
                    $(this).parent().prev().val(count);
                })
            }

            $(function () {
                $(".mainBox-show").on("click", ".addToCat", function () {


                    var data = $(this).data('info');
                    console.log(data);
                    delete (data.bigImg);
                    delete (data.smallImg);
                    //添加购买数量
                    data.num = $(".mainBox .num").val();
                    // console.log(data.num)
                    if (!JSON.parse(localStorage.getItem("user"))) {
                        layer.alert("请先登录");
                        return;
                    }
                    //添加购物人
                    data.uid = JSON.parse(localStorage.getItem("user")).uId

                    console.log(data)
                    //把data 通过ajax发送到 后台
                    $.ajax({
                        url: "./api/addCart",
                        type: "post",
                        headers: {
                            token: localStorage.getItem("token")
                        },
                        data: data,
                    }).then(function (res) {
                        console.log(res);
                        layer.alert(res.msg)

                    })

                })
            })
            // 放大镜
            function FangDaJ() {
                $(".show_oneimg").on("mouseenter", function () {
                    // console.log("111")
                    $(this).find('.middleArea').show();
                    $(this).next().show();
                    //鼠标在小区域内移动
                    $(this).on("mousemove", function (e) {
                        // 获得当前鼠标坐标
                        var disX = e.pageX;
                        var disY = e.pageY;
                        //计算边界
                        var mX = disX - $(this).offset().left - $(this).find(".middleArea").width() / 2;
                        var mY = disY - $(this).offset().top - $(this).find(".middleArea").height() / 2
                        if (mX <= 0) {
                            mX = 0
                        }
                        if (mX >= $(this).width() - $(this).find(".middleArea").width()) {
                            mX = $(this).width() - $(this).find(".middleArea").width();
                        }
                        if (mY <= 0) {
                            mY = 0;
                        }
                        if (mY >= $(this).height() - $(this).find(".middleArea").height()) {
                            mY = $(this).height() - $(this).find(".middleArea").height();
                        }
                        // 移动的比例  小区域移动一丢丢,大图 反正移动n倍数
                        var oScale = $(".bigArea").width() / $(".middleArea").width();
                        //大图
                        $("#bigImg").css({ top: -mY * oScale, left: -mX * oScale });
                        // 小图区域
                        $(".middleArea").css({ top: mY, left: mX });
                        // $(".middImg").css({top:-mY,left:-mX});
                    })
                })
                $(".show_oneimg").on("mouseleave", function () {
                    $(this).find(".middleArea").hide();
                    $(this).next().hide();
                })

                $(".show_left_one").on("mouseenter", "li", function () {
                    // var $index = $(this).index() + 1;
                    // console.log($index);
                    // $(".show_oneimg").find("img").attr("src", `./images/show_one00${$index}.jpg`);
                    // $(".bigArea").find("img").attr("src", `./images/show_one00${$index}.jpg`)
                    $(".show_oneimg img").attr("src", $(this).find("img").attr("src"));
                    $(".bigArea img").attr("src", $(this).find("img").attr("src"));
                })

            }

        })

        //tab切换
        $(function () {
            $(".itempjbox span.comtit").on("click", function () {
                var $index = $(this).index();
                $(this).css({
                    "border-left": "1px solid #ccc",
                    "border-right": "1px solid #ccc",
                    "border-top": "2px solid #DC3334"
                }).siblings().css({ "border": "none" })
                $(".itempjbox .comcon:eq(" + $index + ")").css({ "display": "block" }).siblings().css({ "display": "none" });
            })
        })
    })
    $(".footer").load("./footer.html")

})


